<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{width: 100px;height:50px;background: red;}
    </style>
</head>
<body>
    <div class="box"></div>
    <ul class="list">
        <li>link1</li>
        <li>link2</li>
        <li>link3</li>
        <li>link4</li>
        <li>link5</li>
        <li>link6</li>
    </ul>
</body>
<script src="../jquery.js"></script>
<script>

    // jq所有的事件绑定都是DOM2级绑定：所有的事件都可以重复绑定
    
    // 1. 常规绑定：将事件名作为方法名，传入回调函数作为事件处理函数，大部分的常见事件都支持，个别不支持
    // $(".box").click(function(){
    //     console.log(1);
    // })
    // $(".box").click(function(){
    //     console.log(2);
    // })

    // 2. bind绑定，unbind删除（被淘汰了）
    // $(".box").bind("click.a", function(){
    //     console.log(1)
    // })
    // $(".box").bind("click.s", function(){
    //     console.log(2)
    // })
    // $(".box").unbind("click.a");
    // 通过事件命名空间删除

    // 3. on绑定，off删除
    // $(".box").on("click.a", function(){
    //     console.log(1)
    // })
    // $(".box").on("click.s", function(){
    //     console.log(2)
    // })
    // $(".box").off("click.a");
    // on绑定可以直接支持事件委托，bind不行
    // $(".list").on("click", "li", function(){
    //     console.log(this);
    // })
    // 批量绑定：on和bind都可以
    // $(".box").on({
    //     click:function(){},
    //     mousedown:function(){},
    //     mouseup:function(){}
    // })
    
    // 原生事件委托
    // const olist = document.querySelector(".list")
    // olist.onclick = function(eve){
    //     const e = eve || window.event;
    //     const target = e.target || e.srcElement;
    //     if(target.tagName === "LI"){
    //         console.log(target, this);
    //     }
    // }

    // 4. hover：只能绑定进入和离开
    // enter和leave：不会触发事件冒泡
    // $(".box").hover(function(){
    //     console.log("进入")
    // }, function(){
    //     console.log("离开")
    // })

    // 5. one绑定：一次性事件
    // $(".box").one("click", function(){
    //     console.log(1)
    // })    

    // 6. 模拟事件执行
    // 先绑定一个事件
    // $(".box").click(fn)
    // function fn(){
    //     console.log(1)
    // }
    // setInterval(() => {
    //     // $(".box").trigger("click")
    //     fn();
    // }, 1000);


    // 7. 事件对象
    // 原生的事件对象的方法和属性被保留了，jq做了优化，处理了兼容
    // 事件冒泡：
    // 默认事件：
    // 双层阻止：事件处理函数最后，return false
    



</script>
</html>